import React, {Component, Fragment} from 'react';
import {StyleSheet, View, Text} from 'react-native';
export default class Input extends Component {
  renderChildren() {
    const {children} = this.props;
    return <>{children}</>;
  }
  renderMessages() {
    const {messages, counter, value, inline = false} = this.props;
    return (
      <View style={styles.messagesContainer(inline)}>
        <View style={styles.column}>
          {Array.isArray(messages) &&
            messages.map((ele, index) => {
              return (
                <Fragment key={index}>
                  {React.isValidElement(ele) ? (
                    ele
                  ) : (
                    <Text style={styles.messages}>{ele}</Text>
                  )}
                </Fragment>
              );
            })}
        </View>
        <View style={styles.spancer} />
        {counter && (
          <Text style={styles.counter}>
            {(value && value.length) || 0} / {counter}
          </Text>
        )}
      </View>
    );
  }
  render() {
    const {
      label,
      messages = [],
      counter,
      disabled,
      inline = false,
    } = this.props;
    return (
      <>
        <View style={styles.container(inline)}>
          <View style={inline ? styles.row : styles.column}>
            <View style={styles.labelContainer}>
              <Text style={[styles.label(inline)]}>{label}</Text>
            </View>
            <View
              style={[
                styles.inputContainer(inline),
                disabled && styles.disabledInput,
              ]}>
              {this.renderChildren()}
              {(messages.length || counter) && inline && this.renderMessages()}
            </View>
          </View>
          {inline || <View style={styles.divider} />}
          {(messages.length || counter) && !inline && this.renderMessages()}
        </View>
        {inline && <View style={styles.divider} />}
      </>
    );
  }
}

const styles = StyleSheet.create({
  container: (inline) => ({
    backgroundColor: '#fff',
    marginBottom: inline ? 0 : 10,
    paddingHorizontal: 16,
    paddingVertical: inline ? 10 : 0,
  }),
  labelContainer: {
    minHeight: 24,
  },
  label: (inline) => ({
    fontSize: inline ? 15 : 13,
    color: inline ? '#333' : '#666',
    lineHeight: 24,
    width: inline ? 90 : 'auto',
  }),
  inputContainer: (inline) => ({
    flex: 1,
    minHeight: inline ? 24 : 30,
    flexDirection: 'column',
    justifyContent: 'center',
  }),

  messagesContainer: (inline) => ({
    flexDirection: 'row',
    paddingVertical: inline ? 0 : 5,
  }),
  messages: {
    fontSize: 12,
    color: 'red',
  },
  counter: {
    fontSize: 12,
  },
  disabledInput: {
    opacity: 0.5,
  },
  divider: {
    height: StyleSheet.hairlineWidth,
    backgroundColor:
      StyleSheet.hairlineWidth < 1 ? '#bcbbc1' : 'rgba(0, 0, 0, 0.12)',
  },
  spancer: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
  },
  column: {
    flexDirection: 'column',
  },
});
